<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>产品管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
		});
		
		
		
		function getCategory(categoryId,obj){
			 $("#nextBtn").hide();
			$.get("${ctx}/wechat/productCategory/getCategoryByParentId?parentId="+categoryId, function(data){
				var objs=eval(data);
				 var str='';
				for(var i=0,l=objs.length;i<l;i++){
					   for(var key in objs[i]){
						   str+=' <li class="" id='+objs[i][key]+'  onclick="getCategory1('+objs[i][key]+',this)" >' +key+  '</li>';
					   }
					}
				  $("#box_38").html(str);
				  $("#box_43").html("");
				  $(".category-path").html("<li>"+$(obj).html()+"</li>");
				  $(obj).parent().find('li').removeClass("selected");
				  $(obj).addClass("selected");
				  
				  $("#categoryId").val($(obj).attr("id"));
				  
			});
		}
		
		function getCategory1(categoryId,obj){
			 $("#nextBtn").hide();
			$.get("${ctx}/wechat/productCategory/getCategoryByParentId?parentId="+categoryId, function(data){
				var objs=eval(data);
				 var str='';
				for(var i=0,l=objs.length;i<l;i++){
					   for(var key in objs[i]){
						   str+=' <li class="" id='+objs[i][key]+'  onclick="getCategory2('+objs[i][key]+',this)" >' +key+  '</li>';
					   }
					}
				  $("#box_43").html(str);
				  var length =  $(".category-path li").length;
				  for(var i=0;(i<(length-1));i++ ){
					  $(".category-path li").last().remove();
				  }
				  $(".category-path"). append("<li>&nbsp;&gt;&nbsp;</li><li>"+$(obj).html()+"</li>");
				  $(obj).parent().find('li').removeClass("selected");
				  $(obj).addClass("selected");
				  $("#categoryId").val($(obj).attr("id"));
			});
		}
		
		
		function getCategory2(categoryId,obj){
			var length =  $(".category-path li").length;
			  for(var i=0;(i<length-3);i++ ){
				  $(".category-path li").last().remove();
			  }
				$(".category-path"). append("<li>&nbsp;&gt;&nbsp;</li><li>"+$(obj).html()+"</li>");
				  $(obj).parent().find('li').removeClass("selected");
				$(obj).addClass("selected");
				 $("#categoryId").val($(obj).attr("id"));
				 $("#nextBtn").show();
		}
		
		
	</script>
	<style>
div{display:block}
.cate-wrapper{width:100%;padding:10px;margin:auto;
}
#cate-container {
	border: 1px solid #D5E4FA;
	background: #F5F9FF;
	height: 298px;
}
.cate-wrapper  .nav{
	font-size:14px; background: none repeat scroll 0 0 #F1F7FD;
    font-weight: bold;
    height: 25px;
    overflow: hidden;
    padding: 10px 0 5px 10px;
    text-align: left;}
#cate-container .cat_box {
	display: block;
	float: left;
	margin-left: 5px;
	width: 223px;
	border-right: 2px solid #D5E4FA;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%
}

#cate-container .cat_box li {
	padding: 0 16px 0 14px;
	cursor: pointer;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
}

#cate-container li.selected {
	border: 1px solid #9CD7FC;
	background-color: #DFF1FB;
}

#cate-path{
	color: #444;
	padding-top: 9px;
	position: relative;
	line-height: 22px;
	height: 54px;
	display:block;
}

#cate-path dl {
background-color: #FFFAF2;
border: 1px solid #FEDBAB;
padding: 4px 27px; 
}

#cate-path dt, #cate-path dd {
	float: left;
	 margin: 0;
    padding: 0;
}
 
#cate-path dt {
font-weight: 900;
}

#cate-path li {
float: left;
 margin: 0;
    padding: 0;
}

ul, ol {
 list-style: none outside none;
  margin: 0;
    padding: 0;
}

.clearfix { 
	display: block;
	height: 0;
	clear: both;
	height:22px
}
#cateBottom{

padding: 5px 0 24px;
text-align: center;
    
}
</style>
</head>
<body>
	<div id="mydiv"></div>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/wechat/product/">产品列表</a></li>
		<li class="active"><a href="${ctx}/wechat/product/form?id=${product.id}">产品<shiro:hasPermission name="wechat:product:edit">${not empty product.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="wechat:product:edit">查看</shiro:lacksPermission></a></li>
	</ul>
	<div class="cate-wrapper">
		<div class="nav">选择分类</div>
		<div id="cate-container">
		 
		<div class="cat_box" id="box_0">
			<c:forEach  items="${categoryList }" var="category" >
				<li class="" id="${category.id }"  onclick="getCategory(${category.id },this)" >${category.name }</li>
			</c:forEach>
		</div>
		<div class="cat_box" id="box_38">
		</div>
		<div class="cat_box" id="box_43">
		</div></div>
		
		<div id="cate-path">
		    <dl>
		        <div class="clearfix">
		            <dt>您当前选择的是：</dt>
		            <dd><ol class="category-path"></ol></dd>
		        </div> 
		     </dl>
		
		</div>
		
		<div id="cateBottom">
		<form action="${ctx}/wechat/product/form"  >
			<input type="hidden" value="" name="categoryId"  id="categoryId"    >
			<input value="下一步" id="nextBtn" class="button blueButton" type="submit"  style="display:none;"  >
		</form>
		</div>
		</div>

</body>
</html>
